<template>
    <el-card>
        <el-form :model="form" inline>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="地址">
                        <el-cascader v-model="selectedVillage"
                                     :options="villageOptions"
                                     clearable
                                     :props="props1"
                                     @change="handleCascaderChange"
                                     style="width: 400px;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="姓名：">
                        <el-input v-model="form.helpmanname" placeholder="请输入：" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="身份证号">
                        <el-input v-model="form.idcard" placeholder="请输入完整身份证号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item >
                    <el-button type="primary" @click="searchClick">查询</el-button>
                    <el-button @click="resetClick">重置</el-button>
                    <el-button type="primary" @click="visibleDrawer = true">添加帮扶人</el-button>
                </el-form-item>

            </el-row>
        </el-form>
        <!-- 抽屉 -->
        <el-drawer v-model="visibleDrawer" title="添加帮扶人" size="35%">
            <el-form :model="form2">
                <el-form-item label="姓名：" :label-width="formLabelWidth">
                    <el-input v-model="form2.helpmanname"/>
                </el-form-item>
                <el-form-item label="身份证号：" :label-width="formLabelWidth">
                    <el-input v-model="form2.idcard"/>
                </el-form-item>
                <el-form-item label="帮扶额度：" :label-width="formLabelWidth">
                    <el-input v-model="form2.num" />
                </el-form-item>
                <el-form-item label="市：" :label-width="formLabelWidth">
                    <el-input v-model="form2.city" />
                </el-form-item>
                <el-form-item label="县：" :label-width="formLabelWidth">
                    <el-input v-model="form2.county" />
                </el-form-item>
                <el-form-item label="乡：" :label-width="formLabelWidth">
                    <el-input v-model="form2.town" />
                </el-form-item>
                <el-form-item label="村：" :label-width="formLabelWidth">
                    <el-input v-model="form2.village" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visibleDrawer = false">取消</el-button>
                    <el-button type="primary" @click="addHelp">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </el-card>
    <el-card style="height: 400px; margin-top: 20px">
    <div class="table-container" style="display: flex; flex-direction: column;">
        <el-table :data="tableData" stripe border class="center-table" style="margin-top:20px;">
            <!--  <el-table-column type="index" width="80" />-->
            <el-table-column prop="helpmanid" label="序号" width="80" />
            <el-table-column prop="helpmanname" label="姓名" width="120"/>
            <el-table-column prop="num" label="帮扶额度" width="120"/>
            <el-table-column prop="idcard" label="身份证号" width="220"/>
            <el-table-column prop="city" label="市" width="95" />
            <el-table-column prop="county" label="县" width="95"/>
            <el-table-column prop="town" label="乡" width="95"/>
            <el-table-column prop="village" label="村" width="120"/>
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button :icon="Edit"  type="primary" @click="update(scope.$index,scope.row)"></el-button>
                    <el-button :icon="Delete"  type="danger" @click="del(scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗用于编辑 -->
        <el-dialog v-model="dialogFormVisible" title="帮扶人信息编辑" width="500">
            <el-form :model="form1">
                <el-form-item label="姓名：" :label-width="formLabelWidth">
                    <el-input v-model="form1.helpmanname" disabled/>
                </el-form-item>
                <el-form-item label="身份证号：" :label-width="formLabelWidth">
                    <el-input v-model="form1.idcard" disabled/>
                </el-form-item>
                <el-form-item label="帮扶额度：" :label-width="formLabelWidth">
                    <el-input v-model="form1.num" />
                </el-form-item>
                <el-form-item label="市：" :label-width="formLabelWidth">
                    <el-input v-model="form1.city" />
                </el-form-item>
                <el-form-item label="县：" :label-width="formLabelWidth">
                    <el-input v-model="form1.county" />
                </el-form-item>
                <el-form-item label="乡：" :label-width="formLabelWidth">
                    <el-input v-model="form1.town" />
                </el-form-item>
                <el-form-item label="村：" :label-width="formLabelWidth">
                    <el-input v-model="form1.village" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateHelp">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 分页条 -->
        <div class="page" style="display: flex; justify-content: flex-end;">
            <el-pagination
                    :background=true
                    v-model:total="totalCount"
                    v-model:page-size="form.pageSize"
                    :small=false
                    :page-sizes="[5, 10, 20, 50]"
                    @size-change="handleSizeChange"
                    layout="sizes, prev, pager, next, jumper"
                    @current-change="changePageNumber" />
        </div>
    </div>
    </el-card>
</template>

<script setup>
    import {reactive, ref,onMounted} from 'vue'
    import villageData from '@/assets/village.json';
    import { searchPage,deleteHelpman,updateHelpman,addHelpman} from '@/api/helpman'
    import { ElMessage } from 'element-plus'
    import {Delete, Edit} from "@element-plus/icons-vue";

    const tableData = ref([]); // table数据
    const dialogVisible = ref(false);

    const villageOptions = villageData;
    const selectedVillage = ref([]);
    var requestData=ref([]);
    const totalCount = ref(10);
    const props1 = {
        checkStrictly: true,
    }
    const area_data = () =>{
        request_params.pageNum=form.pageNum
        request_params.pageSize=form.pageSize
        request_params.helpmanname = form.helpmanname;
        request_params.idcard = form.idcard;
        request_params.num=form.num;
        for (let i=0;i<requestData.value.length;i++){
            switch (i) {
                case 0:
                    request_params.city = requestData.value[i]['label']
                    break;
                case 1:
                    request_params.county = requestData.value[i]['label']
                    break;
                case 2:
                    request_params.town = requestData.value[i]['label']
                    break;
                case 3:
                    request_params.village = requestData.value[i]['label']
                    break;
            }
        }
    }
    // const form2={
    //     helpmanname:'',
    //     idcard:'',
    //     num:'',
    //     city:'',
    //     county:'',
    //     town:'',
    //     village:''
    // }
    const  form2=ref({});
    const request_params = {
        helpmanname:'',
        idcard:'',
        num:'',
        city:'',
        county:'',
        town:'',
        village:'',
        pageNum: 1,
        pageSize: 5
    }
    const form = reactive({
        helpmanname:'',
        idcard:'',
        num:'',
        pageNum: 1,
        pageSize: 5
    })
    onMounted(() => {
        myPage();
    });

    const searchClick=((res)=>{
        myPage();
    });
    const handleCascaderChange = (value, selectedLabels) => {
        if(value==null)return;
        requestData.value = value.map((val, index) => ({
            label: findLabelByValue(val,villageOptions), // 查找并添加对应的label
        }));
        console.log(requestData.value);
    };


    // 辅助函数：根据value查找label
    const findLabelByValue = (targetValue, options) => {
        for (const option of options) {
            if (option.value === targetValue) {
                return option.label;
            }
            if (option.children) {
                const foundLabel = findLabelByValue(targetValue, option.children);
                if (foundLabel) {
                    return foundLabel;
                }
            }
        }
        return null;
    };



    const changePageNumber = (pageNum) => {
        form.pageNum = pageNum;
        myPage();
    }

    const handleSizeChange = () => {
        myPage();
    }

    const myPage = () => {
        area_data();
        searchPage(request_params).then((res) => {
            console.log(request_params)
            tableData.value = res.data.list;
            console.log(tableData.value)
            totalCount.value = res.data.total;
        });
    }

    //控制编辑对话框
    const dialogFormVisible = ref(false)
    const visibleDrawer=ref(false)
    const formLabelWidth = '150px'
    //打开编辑对话框
    const form1 = ref([])
    const tableData1 = ref([])
    var indexaa;
    const update=(index,row)=>{
        dialogFormVisible.value=true;
        indexaa =index
        form1.value =JSON.parse(JSON.stringify(row))
        console.log(33)
        console.log(form1.value)
    };
    //确认编辑
    const updateHelp =(index)=>{
        console.log(2222)
        console.log(indexaa)
        updateHelpman(form1.value).then((res) => {
            dialogFormVisible.value=false;
            location.reload();
        });
    };
    const addHelp=()=>{
        addHelpman(form2.value).then(()=>{
            console.log(888)
            console.log(form2.value)
            visibleDrawer.value=false;
            location.reload();
        })
    }
    //点击删除
    const del=(index)=>{
        // console.log(1111)
        const item= reactive(tableData.value[index])
        // console.log(item)
        deleteHelpman(item).then((res) => {
            tableData.value.splice(index,1);
        });
    };

    const resetClick = () => {
        request_params.pageNum=form.pageNum
        request_params.pageSize=form.pageSize
        request_params.helpmanname = form.helpmanname;
        request_params.idcard = form.idcard;
        request_params.num=form.num;
        request_params.city = '';
        request_params.county = '';
        request_params.town = '';
        request_params.village = '';
        searchPage(request_params).then((res) => {
            console.log(res)
            tableData.value = res.data.list;
            totalCount.value = res.data.total;
        });
    }

</script>

<style scoped>

    :deep(.center-table td),
    :deep(.center-table th) {
        text-align: center !important;
    }

    .page{
        margin-top:10px;
    }
</style>